<template>
  <div>
    <p>{{name}}</p>
    <button @click="myFn1">按钮</button>
    <p>{{age}}</p>
    <button @click="myFn2">按钮</button>
  </div>
</template>

<script>
/**
 * 1.composition API 和 Options API混合使用
 * 2.composition API 本质（组合api/注入api）
 * 3.setup执行时机
 *setup
 *beforeCreate : 表示组件刚刚被创建出来，组件的data和methods还没有初始化好
 *create :表示组件刚刚被创建出来，并且组件的data和methods已经初始化好
 * 4.setup注意点
 *由于在执行setup函数的时候，还没有执行create生命周期方法
 *所以在setup函数中，是无法使用data和methods
 *由于我们不能再setup函数中使用data和methods,
 *所以vue为了避免我们错误的使用，它直接将setup函数中this修改成了undefined
 *setup函数只能是同步的，不能是异步的
 */
import { ref } from "vue";
export default {
  name: "App",
  data() {
    return {
      name: "lz"
    };
  },
  methods: {
    myFn1() {
      alert("abc");
    }
  },
  setup() {
    let age = ref(18);
    function myFn2() {
      alert(2222);
    }
    return {
      age,
      myFn2
    };
  }
};
</script>
